$(function () {
  let layer = layui.layer;
  let form = layui.form;
  //友情链接列表-----------------------------------------------
  loadLinksInfo();
  function loadLinksInfo() {
    $.ajax({
      type: "get",
      url: "admin/links",
      success: function (res) {
        var tags = template("table-tpl", res);
        $(".layui-table tbody").html(tags);
        console.log(res);
      },
    });
  }

  // 删除友情链接------------------------------------------------
  $("body").on("click", ".delete", function () {
    let id = $(this).attr("data-id");
    layer.confirm("is not?", function (index) {
      //do something
      $.ajax({
        type: "DELETE",
        url: "admin/links/" + id,
        success: function (res) {
          if (res.status === 0) {
            layer.msg("已经删除");
            loadLinksInfo();
            layer.close(index);
          }
        },
      });
    });
  });

  //添加友情链接--------------------------------------------
  let addIndex;
  $("#add-link").on("click", function () {
    addIndex = layer.open({
      type: 1, // 弹出层就是页面层
      title: "添加友情链接", // 标题
      // area: ["500px", "300px"], // 宽高
      area: "500px", // 宽
      content: $("#addFormTpl").html(), // 注意是通过html() 来获取的结果，因为这样会获取到标签 + 内容
    });

    //美化file
    $("#urlIcon").click(function () {
      $("#linkFile").click();
    });

    //change事件监听文件域名
    $("#linkFile").change(function () {
      let file = this.files[0];
      let newImgURL = URL.createObjectURL(file);
      $("#preIcon").attr("src", newImgURL);
    });

    //提交数据给后台
    $("#add-form").submit(function (e) {
      e.preventDefault();
      var fd = new FormData(this);
      $.ajax({
        type: "POST",
        url: "admin/links",
        data: fd,
        processData: false,
        contentType: false,
        success: function (res) {
          if (res.status === 0) {
            layer.close(addIndex);
            loadLinksInfo();
          }
        },
      });
    });
  });

  //编辑友情链接------------------------------------------
  let editIndex;
  $("#tb").on("click", ".edit", function () {
    let id = $(this).attr("data-id");
    $.ajax({
      type: "GET",
      url: "admin/links/" + id,
      success: function (res) {
        editIndex = layer.open({
          type: 1, // 弹出层就是页面层
          title: "编辑友情链接", // 标题
          // area: ["500px", "300px"], // 宽高
          area: "500px", // 宽
          // content: "<h1>哈哈</h1>",
          content: $("#editFormTpl").html(), // 注意是通过html() 来获取的结果，因为这样会获取到标签 + 内容
        });
        $("#preIcon").attr(
          "src",
          "http://localhost:8888/uploads/" + res.data.linkicon
        );
        form.val("editForm", res.data);

        //美化file
        $("#urlIcon").click(function () {
          $("#linkFile").click();
        });

        //change事件监听文件域名
        let file = null;
        $("#linkFile").change(function () {
          file = this.files[0];
          let newImgURL = URL.createObjectURL(file);
          $("#preIcon").attr("src", newImgURL);
        });

        $("#edit-form").submit(function (e) {
          e.preventDefault();
          let fd = new FormData(this);
          if (file) {
            fd.append("linkicon", file);
          }
          $.ajax({
            type: "PUT",
            url: "admin/links/" + id,
            data: fd,
            processData: false,
            contentType: false,
            success: function (res) {
              if (res.status === 0) {
                layer.close(editIndex);
                loadLinksInfo();
              }
            },
          });
        });
      },
    });
  });
});
